<template>
    <div>
        <button @click="count++">count is: {{ count }}</button> 

    </div>
<!-- 有时我们需要在内联事件处理器中访问原生 DOM 事件。
你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数： -->
<!-- 使用特殊的 $event 变量，自动包含原生事件对象 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
<!-- 使用内联箭头函数，手动传递 event 参数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />
</template>

<script setup>
import {ref} from 'vue'
const count = ref(0)
function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
</script>


<style lang="scss" scoped>

</style>